<template>
    <div class="px-4 py-3 flex items-center justify-between border-t border-neutral-medium/30">
        <div class="flex-1 flex justify-between sm:hidden">
            <button
                class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 text-sm font-medium rounded-md text-neutral bg-white hover:bg-neutral-light">
                上一页
            </button>
            <button
                class="ml-3 relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 text-sm font-medium rounded-md text-neutral bg-white hover:bg-neutral-light">
                下一页
            </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-neutral">
                    显示第 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span
                        class="font-medium">42</span> 条记录
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    <button
                        class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-neutral-medium/30 bg-white text-sm font-medium text-neutral hover:bg-neutral-light">
                        <span class="sr-only">上一页</span>
                        <i class="fa fa-chevron-left text-xs"></i>
                    </button>
                    <button
                        class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 bg-primary text-sm font-medium text-white">
                        1
                    </button>
                    <button
                        class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 bg-white text-sm font-medium text-neutral hover:bg-neutral-light">
                        2
                    </button>
                    <button
                        class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 bg-white text-sm font-medium text-neutral hover:bg-neutral-light">
                        3
                    </button>
                    <span
                        class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 bg-white text-sm font-medium text-neutral">
                        ...
                    </span>
                    <button
                        class="relative inline-flex items-center px-4 py-2 border border-neutral-medium/30 bg-white text-sm font-medium text-neutral hover:bg-neutral-light">
                        8
                    </button>
                    <button
                        class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-neutral-medium/30 bg-white text-sm font-medium text-neutral hover:bg-neutral-light">
                        <span class="sr-only">下一页</span>
                        <i class="fa fa-chevron-right text-xs"></i>
                    </button>
                </nav>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>
